<template>
    <div class="container" @click="handleClick">
        <img :src="movie.imageUrl" alt="">
        <p>{{movie.title}}</p>
    </div>
</template>
<script>
    export default {
        name:"MovieItem",
        props:{
            movie:{
                type:Object
            }
        },
        methods:{
            handleClick(){
                this.$emit("jump",this.movie.id)
            }
        }
    }
</script>
<style lang="scss" scoped>
.container{
    img{
        width: 150px;
        height: 204px;
    }
    font-size: 14px;
    box-shadow: 0 0 5px 3px rgba(51,51,51,0.26);
    margin-right: 20px;
    margin-top: 20px;
    text-align: center;
}
</style>

